<!doctype html>
<html lang="en">

<head>
    <title>就诊人管理</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="lib/vue.js"></script>
    <link rel="stylesheet" href="lib/head.css">
</head>

<body>
    <div id="app">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-md navbar-dark" style="background-color: rgb(136, 136, 240);">
            <a class="navbar-brand" href="#">东方之光医院<span>🏥</span></a>
            <div class="collapse navbar-collapse" id="collapsibleNavId">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <li class="nav-item active ml-4">
                        <a class="nav-link" href="welcome.html">首页 <span class="sr-only">(current)</span></a>
                    </li>

                    <li class="nav-item dropdown ml-4">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">医院概况</a>
                        <div class="dropdown-menu" aria-labelledby="dropdownId">
                            <a class="dropdown-item" href="instroduction.html">医院介绍</a>
                            <a class="dropdown-item" href="history.html">医院历史</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown ml-4">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">医疗服务</a>
                        <div class="dropdown-menu" aria-labelledby="dropdownId">
                            <a class="dropdown-item" href="index.html">门诊排班</a>
                            <a class="dropdown-item" href="index.html">预约挂号</a>
                            <a class="dropdown-item" href="PatientServices.html">住院须知</a>
                            <a class="dropdown-item" href="insurance.html">医保专区</a>
                        </div>
                    </li>

                    <li class="nav-item ml-4">
                        <a class="nav-link" href="index.html">科室导航</a>
                    </li>
                    <li class="nav-item ml-4">
                        <a class="nav-link" href="https://www.csuft.edu.cn/">学术交流</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="text" placeholder="Search" value="搜索科室、医师">
                    <button class="btn btn-success my-2 my-sm-0" type="submit">搜索</button>
                </form>
            </div>
        </nav>

        <!-- 头部图片head -->
        <div class="ban_pic" style="background-image:url('https://www.xiangya.com.cn/images/ban_cd2.jpg')">
            <div class="ban_nr">
                <h1>医疗服务</h1>
                <p>为患者用户提供专业一流的就医服务</p>
            </div>
        </div>
        <!--  -->
        <div class="jumbotron jumbotron-fluid py-3">
            <!-- <div class="container-fluid">
                <h1 class="display-3">线上挂号系统</h1>
                <p class="lead">东方之光医院</p>
                <hr class="my-8">
            </div> -->
            <nav class="breadcrumb" style="margin-bottom: 0px; padding-bottom: 5px;">
                <p>
                    <span><a href="index.html" style="text-decoration: none;">科室导航 / </a></span>
                    <span><a href="department.html" style="text-decoration: none;"
                            v-if="depart!=null">{{depart.title}}排班 /
                        </a>
                        <a href="index.html" style="text-decoration: none;" v-else>请选择科室 /</a>
                    </span>
                    <span style="text-decoration: none;color: rgb(111, 105, 105);">就诊人管理 / </span>
                    <span><a href="appointment.html" style="text-decoration: none;">预约信息 </a></span>
                </p>
            </nav>
            </nav>
        </div>

        <!-- 就诊人管理 -->
        <div class="container">

            <h1 class="font-weight-light h2 mb-4 offset-2">就诊人管理</h1>
            <div class="row">
                <div class="row col-md-4 mb-2 offset-2">
                    <!-- 模态框 -->
                    <div>
                        <!-- Button trigger modal -->
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal1">
                            新增就诊人
                        </button>

                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog"
                            aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">填写就诊人信息</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form action="">
                                            <div class="row mb-2">
                                                <span class="col-md-2">姓名</span><input type="text"
                                                    v-model="newpatient.name">
                                            </div>
                                            <div class="row mb-2">
                                                <span class="col-md-2">身份证</span><input type="text"
                                                    v-model="newpatient.idCard">
                                            </div>
                                            <div class="row mb-2">
                                                <span class="col-md-2">手机号</span><input type="text"
                                                    v-model="newpatient.phone">
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                        <button type="button" @click="addPatient()" class="btn btn-primary"
                                            data-dismiss="modal">添加</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 offset-8">
                    <form class="form-inline">
                        <input class="form-control mr-sm-2" type="text" id="search" placeholder="搜索就诊人">
                        <button class="btn btn-primary my-2 my-sm-0" type="button" @click="selectPatient">搜索</button>
                    </form>
                </div>
            </div>
            <div class="row">
                <table class="table table-striped table-hover offset-2">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>身份证号</th>
                            <th>手机号</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(patient, index) in allpatient" :key="patient.id">
                            <td>{{patient.name}}</td>
                            <td>{{patient.idCard}}</td>
                            <td>{{patient.phone}}</td>
                            <td>
                                <!-- 模态框 -->
                                <span>
                                    <!-- Button trigger modal -->
                                    <button type="button" class="btn btn-primary" @click="getPatient(patient)"
                                        data-toggle="modal" data-target="#exampleModal2">
                                        编辑
                                    </button>

                                    <!-- Modal -->
                                    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog"
                                        aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleModalLabel">填写就诊人信息</h5>
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <form action="">
                                                        <div class="row mb-2">
                                                            <span class="col-md-2">姓名</span><input type="text"
                                                                v-model="editpatient.name">
                                                        </div>
                                                        <div class="row mb-2">
                                                            <span class="col-md-2">身份证</span><input type="text"
                                                                v-model="editpatient.idCard">
                                                        </div>
                                                        <div class="row mb-2">
                                                            <span class="col-md-2">手机号</span><input type="text"
                                                                v-model="editpatient.phone">
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-dismiss="modal">取消</button>
                                                    <button type="button" @click="updatePatient(patient)"
                                                        class="btn btn-primary" data-dismiss="modal">保存</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </span>
                                <button type="button" @click="del(patient.id)" class="btn btn-primary">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 页脚&网址地图 -->
    <!-- <div class="ban_pic" style="background-image:url('https://www.xiangya.com.cn/images/foot_bj.jpg')"> -->
    <div class="ban_pic" style="background-color:rgb(136, 136, 240);">
        <div class="ban_nr">
            <p class="lead text-center">Copyright© 2022 每天赚五块 版权所有 Powered by daydaygetfive.com</p>
            <p>
                <img src="/yxy-ruan4/html/lib/2wm.png">
            </p>
            <p class="lead text-center">组员：潘晴晴 | 文舒琪 | 易新宇 | 刘家 | 蒋佳骏 | 罗忻欣 | 谭新纪</p>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                oripatientArr: {},
                allpatient: [],
                editpatient: {},//暂存修改的就诊人信息
                newpatient: {},//暂存新增就诊人信息
                depart: null
            }
        },
        mounted() {
            this.getallPatient();
            this.depart = JSON.parse(sessionStorage.getItem("currentDept"));
        },
        methods: {
            getPatient(pa) {
                this.editpatient = {
                    id: pa.id,
                    name: pa.name,
                    idCard: pa.idCard,
                    phone: pa.phone
                }
            },
            selectPatient() {
                //使用正则实现模糊查询
                this.allpatient = this.oripatientArr;
                let input = document.getElementById('search').value;
                let reg = new RegExp(input + ".*");
                this.allpatient = this.allpatient.filter(item => {
                    return reg.test(item.name) == true
                })
            },
            getallPatient() {
                axios.get(`http://121.196.41.117:8080/api/patient`)   //就诊人接口
                    .then((response) => {
                        this.allpatient = response.data;
                        this.oripatientArr = response.data;
                    })
                    .catch(function (error) {
                    })
            },
            // addPatient() {//添加就诊人
            //     axios.post(`http://121.196.41.117:8080/api/patient`, this.newpatient)
            //         .then((response) => {
            //             let flag = response.data;
            //             if (flag) {
            //                 alert("添加成功！");
            //                 this.getallPatient();
            //             }else{
            //                 alert("请勿输入相同身份巡航");

            //             }
            //         })
            //         .catch(function (error) {
            //         })
            //     newpatient: { }
            // },
            addPatient() {
                let regName = /^[\u4e00-\u9fa5]+$/;
                let regCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                let regPhone = /^1(3|4|5|7|8)\d{9}$/;
                if (regName.test(this.newpatient.name)) {
                    if (regCard.test(this.newpatient.idCard)) {
                        if (regPhone.test(this.newpatient.phone)) {
                            axios.post(`http://121.196.41.117:8080/api/patient`, this.newpatient)
                                .then((response) => {
                                    let flag = response.data;
                                    if (flag) {
                                        alert("添加成功！");
                                        this.getallPatient();
                                    } else {
                                        alert("请勿添加重复身份证号的就诊人");
                                    }
                                })
                                .catch(function (error) {
                                })
                        } else {
                            alert("电话号码输入错误!")
                        }
                    } else {
                        alert("身份证号码输入错误!")
                    }
                } else {
                    alert("姓名输入错误!");
                }
            },
            // updatePatient(p) {//修改就诊人信息
            //     this.editpatient.id = p.id
            //     this.editpatient.state = p.state
            //     axios.put(`http://121.196.41.117:8080/api/patient`, this.editpatient)
            //         .then((response) => {
            //             if (response.data) {
            //                 alert("修改成功！");
            //                 this.getallPatient();
            //             } else {
            //                 alert("修改失败！");
            //             }
            //         })
            //         .catch(function (error) {
            //         })
            //     this.editpatient = {}
            // },
            updatePatient() {
                let regName = /^[\u4e00-\u9fa5]+$/;
                let regCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                let regPhone = /^1(3|4|5|7|8)\d{9}$/;
                if (regName.test(this.editpatient.name)) {
                    if (regCard.test(this.editpatient.idCard)) {
                        if (regPhone.test(this.editpatient.phone)) {
                            axios.put(`http://121.196.41.117:8080/api/patient`, this.editpatient)
                                .then((response) => {
                                    if (response.data) {
                                        alert("修改成功！");
                                        this.getallPatient();
                                    } else {
                                        alert("修改失败！");
                                    }
                                })
                                .catch(function (error) {
                                })
                        } else {
                            alert("电话号码输入错误!")
                        }
                    } else {
                        alert("身份证号码输入错误!")
                    }
                } else {
                    alert("姓名输入错误!");
                }
            },
            // edit(patient) {
            //     this.editpatient = {
            //         id: patient.id,
            //         name: patient.name,
            //         phone: patient.phone,
            //         state: patient.state,
            //         idCard: patient.idCard
            //     }
            //     this.updatePatient()
            // },
            del(id) {
                if (confirm("确定删除" + id + "号就诊人")) {
                    axios.put(`http://121.196.41.117:8080/api/patient/${id}`)  //就诊人id接口
                        .then((response) => {
                            if (response.data) {
                                alert("删除成功！");
                                this.getallPatient();
                            } else {
                                alert("删除失败");
                            }
                        })
                        .catch(function (error) {
                        })
                }

            }

        },
    })
</script>